import {defineComponent, PropType} from 'vue';
import { showSlot } from '~/src/utils/hooks';
import Style from "./index.module.scss";
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {IMzpbZs} from "@/api/typing";
import {ghStore} from "@/store/modules/yvyue";
// 定义标签数据类型（支持分页筛选）
interface TagItem {
    id: string;
    title: string;
}
export default defineComponent({
    props: {
        /** 是否选中 */
        active: {
            type: Boolean,
            default: false
        },
        /** 路由跳转路径 */
        to: {
            type: String,
            default: ''
        },
        /** 按钮的完整信息 */
        TagItem: {
            type: Object as PropType<IMzpbZs>,
            required: true
        }

    },
    setup(props, { slots, attrs }) {

// 处理点击事件，携带信息跳转
        const handleClick = () => {
            if (props.to) {
                // 记录面包屑选择的内容
                const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
                breadcrumbStore.addTitle(props.TagItem.ZS_MC);

                const ghstore= ghStore(); // 实例化Pinia存储
                ghstore.setZs(props.TagItem); // 设置当前选择的诊室信息

                router.push({
                    path: props.to,
                    query: {}
                });
            }
        };
        return () => (<>
            <div class={[Style.but,props.active ? Style.active : '']} {...attrs}
                 onClick={handleClick}>
                {showSlot(slots)}
            </div>
        </>);
    }
})
